﻿@model PTUDW_CNTN2010_F_CDT.Models.ProductDetailsModel

<script type="text/javascript" src="/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="/lightbox/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="/lightbox/js/lightbox.js"></script>
<link rel="stylesheet" href="/lightbox/css/lightbox.css" type="text/css" media="screen" />





<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<style>
        body
        {
            font-family: Tahoma;
            font-size: 12px;
        }
        h1
        {
            font-size: 1.7em;
        }
        h2
        {
            font-size: 1.5em;
        }
        h3
        {
            font-size: 1.2em;
        }
        ul.nostyle
        {
            list-style: none;
        }
        ul.nostyle h3
        {
            margin-left: -20px;
        }
    </style>

<body style="padding:35px">
<fieldset style="background:url(/images/img/img1.jpg)">
    <legend>Product</legend>

    <div id="picture" class="span-12">
        <div id="show3D"></div>
        <div style="margin:10px 30px; ">
            @foreach (var item in Model.Images)
            {
                <a href="@Html.DisplayFor(model => Model.Product.ImageUrl)" rel="lightbox[roadtrip]"><img src="@Html.DisplayFor(model => item.url)" width="72" height="72" alt=""></a>
            }
        </div>
    </div>

    <div id="info" class="span-11 last">
    <div class="ProName" >
           @Html.DisplayFor(model => Model.Product.ProductName)
    </div>
        <div class="row" style="color:#000">
            <span >
                @Html.DisplayFor(model => Model.Product.Description)
            </span>
        </div>

        <div class="row">
            <span class="Price">
                @Html.DisplayFor(model => Model.Product.Price)
            </span>

            <span class="AddCart">
                Quantity: @Html.TextBox("Quantity", Model.Product.ProductId, new { style = "width: 20px;" })
                <a class="button" href="#" style="float: right"><span>Add to cart </span></a>
            </span>
        </div>

        <div class="row">
            <div id="product_comments_block_extra" style="clear: both;">
                <div class="comments_advices">
                    <a class="open-comment-form" href="#commentBox">Write your review</a>
                </div>
            </div>
        </div>

        <div class="row">
            <p>
                <img src="../../Content/Images/EmptyStar.png" alt="Star Rating" align="middle" id="1" />
                <img src="../../Content/Images/EmptyStar.png" alt="Star Rating" align="middle" id="2" />
                <img src="../../Content/Images/EmptyStar.png" alt="Star Rating" align="middle" id="3" />
                <img src="../../Content/Images/EmptyStar.png" alt="Star Rating" align="middle" id="4" />
                <img src="../../Content/Images/EmptyStar.png" alt="Star Rating" align="middle" id="5" />
            </p>
            <div id="result">

            </div>
        </div>

        <div class="row">
            <script>function fbs_click() { u = location.href; t = document.title; window.open('http://www.facebook.com/sharer.php?u=' + encodeURIComponent(u) + '&t=' + encodeURIComponent(t), 'sharer', 'toolbar=0,status=0,width=626,height=436'); return false; }</script>
            <style>
                html .fb_share_link
                {
                    padding: 2px 0 0 20px;
                    height: 16px;
                    background: url(http://static.ak.facebook.com/images/share/facebook_share_icon.gif?6:26981) no-repeat top left;
                }
            </style>
            <a rel="nofollow" href="http://www.facebook.com/share.php?u=<;url>" onclick="return fbs_click()" target="_blank" class="fb_share_link">Share on Facebook</a>

        </div>
        </div>
</fieldset>
<p>
    @Html.ActionLink("Edit", "Edit", new { id = Model.Product.ProductId }) |
    @Html.ActionLink("Back to List", "Index")
</p>

<div>
    <fieldset style="background:#faea97">
        <legend>Đánh giá của người dùng</legend>
        <div style="margin:20px 10px 10px 10px; background:url(/images/img/backgroundComment.png); border:2px solid #000; padding:10px">
            @foreach (var item in Model.Comments)
            {
                <div style="color:#f00">
                    @Html.Label(item.Name + ": ")
                </div>
                <div style="padding-left:20px">
                    @item.Comments
                </div>
            }
            </div>
    </fieldset>
</div>

@using (Html.BeginForm("AddComment", "Comment", FormMethod.Post))
{
    <fieldset style="background:url(/images/img/backgroundchat.png)">
        <legend>Comment</legend>

        <div id="commentBox" class="editor-field">
            @Html.TextAreaFor(model => model.CommentModel.Comment, new { @placeholder = "Your comment here", @class ="resize"})
            @Html.ValidationMessageFor(model => model.CommentModel.Comment)
        </div>
        
        <div style="width:400px; background:#72ceeb; padding:10px; float:left; border:1px solid #ff6a00">
        <div class="editor-field">
           <span style="font-size:18px;">Email:</span> @Html.TextBoxFor(model => model.CommentModel.Email, new { @placeholder = "Enter your email" })
            @Html.ValidationMessageFor(model => model.CommentModel.Email)
        </div>
        
        <div class="editor-field">
           <span style="font-size:18px;">Name:</span>  @Html.TextBoxFor(model => model.CommentModel.Name, new { @placeholder = "Enter your name" })
            @Html.ValidationMessageFor(model => model.CommentModel.Name)
        </div>
        
        <div class="editor-field">
            @Html.ValidationMessageFor(model => model.CommentModel.Name)
        </div>
            </div>
        <div style="padding:30px">
        <input class="submit-btn" type="submit" value="Post comment" style="padding:20px 10px"/>
        </div>
        <input type="hidden" name="Id" value="@Model.Product.ProductId" id="abc"/>
        <input type="hidden" name="returnurl" value="@Request.Url.AbsoluteUri"/>
        <input type="hidden" name="rate" value="@Model.Product.Rating" id="rating" />
    </fieldset>
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
    var $j = jQuery.noConflict();
    $j(function () {
        fill();
    });

    function fill() {
        var temp = parseInt($j("#rating").val());
        if (temp >= 1)
            giveRating(($j("#1")), "FilledStar.png");
        if (temp >= 2)
            giveRating(($j("#2")), "FilledStar.png");
        if (temp >= 3)
            giveRating(($j("#3")), "FilledStar.png");
        if (temp >= 4)
            giveRating(($j("#4")), "FilledStar.png");
        if (temp >= 5)
            giveRating(($j("#5")), "FilledStar.png");
    }

    function unfill() {
        giveRating(($j("#1")), "EmptyStar.png");
        giveRating(($j("#2")), "EmptyStar.png");
        giveRating(($j("#3")), "EmptyStar.png");
        giveRating(($j("#4")), "EmptyStar.png");
        giveRating(($j("#5")), "EmptyStar.png");
    }

    $j(function () {
        $j("img").mouseover(function () {
            if (check($j(this)) == true) {
                unfill();
                giveRating($j(this), "FilledStar.png");
                $j(this).css("cursor", "pointer");
            }
        });

        $j("img").mouseout(function () {
            if (check($j(this)) == true) {
                giveRating($j(this), "EmptyStar.png");
                fill();
            }
        });

        $j("img").click(function () {
            if (check($j(this)) == true) {
                $j("img").unbind("mouseout mouseover click");
                var ar1 = parseInt($j(this).attr("id"));
                var ar2 = parseInt($j("#abc").val());
                var url = "/Rating/PostRating?rating=" + parseInt($j(this).attr("id")) + "&productId=" + ar2;
                $j.post(url, null, function (data) {
                    if (data == 0) {
                        $j("#result").text("Ban da rating san pham nay roi!");
                        unfill();
                        fill();
                    }
                    else if (data == 1)
                        $j("#result").text("Cam on ban!");
                });
            }
        });
    });

    function giveRating(img, image) {
        img.attr("src", "/Content/Images/" + image)
           .prevAll("img").attr("src", "/Content/Images/" + image);
    }

    function check(img) {
        var id = img.attr("id");

        if (id != "1" && id != "2" && id != "3" && id != "4" && id != "5")
            return false;
        return true;
    }
</script>

        <script type="text/javascript" src="~/webgl/three.min.js"></script>
		<script type="text/javascript" src="~/webgl/OBJLoader.js"></script>
		<script type="text/javascript" src="~/webgl/Detector.js"></script>
		<script type="text/javascript" src="~/webgl/stats.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
		<script>
		    var $j = jQuery.noConflict();

		    var stats;
		    var $jcontainer = $j('#show3D');

		    var camera, scene, renderer;

		    var viewPortHalfX = $jcontainer.width() / 2;
		    var viewPortHalfY = $jcontainer.height() / 2;
            
		    var object;

		    var mouseX = 0;
		    var mouseY = 0;

		    var rotx = 0;
		    var roty = 0;

		    var flag = false;


		    init();
		    animate();


		    function init() {
		        camera = new THREE.PerspectiveCamera(45, viewPortHalfX / viewPortHalfY, 1, 2000);
		        camera.position.z = 1000;
		        camera.position.x = 0;
		        camera.position.y = 0;

		        scene = new THREE.Scene();

		        var ambientLight = new THREE.AmbientLight(0x000044);
		        scene.add(ambientLight);

		        var directionalLight = new THREE.DirectionalLight(0xffffff);
		        directionalLight.position.set(1, 1, 1).normalize();
		        scene.add(directionalLight);

		        var texture = new THREE.Texture();

		        var loader = new THREE.ImageLoader();
		        loader.addEventListener('load', function (event) {

		            texture.image = event.content;
		            texture.needsUpdate = true;

		        });
		        //loader.load('/webgl/ash_uvgrid01.jpg');

		        var loader = new THREE.OBJLoader();
		        loader.addEventListener('load', function (event) {

		            object = event.content;

		            object.traverse(function (child) {

		                if (child instanceof THREE.Mesh) {

		                    //child.material.map = texture;

		                }

		            });

		            object.position.y = 0;
		            object.position.x = 0;
		            object.position.z = 0;
		            scene.add(object);

		        });
		        loader.load('/webgl/iPhone 5.obj');

		        //

		        renderer = new THREE.WebGLRenderer();
		        renderer.setSize($jcontainer.width(), $jcontainer.width());
		        $jcontainer.append(renderer.domElement);

		        window.addEventListener('resize', onWindowResize, false);

		    }

		    $jcontainer.mousedown(function (e) {
		        mouseX = e.pageX - this.offsetLeft;
		        moyseY = e.pageY - this.offsetTop;
		        flag = true;
		    });

		    $jcontainer.mousemove(function (e) {
		        if (flag == true) {

		            var x = e.pageX - this.offsetLeft;
		            var y = e.pageY - this.offsetTop;

		            roty += (x - mouseX) * 0.01;
		            rotx += (y - mouseY) * 0.01;

		            object.rotation.y = roty;
		            object.rotation.x = rotx;

		            mouseX = x;
		            mouseY = y;
		            $j("#result").text(rotx+ " " + roty);
		        }
		    });

		    $jcontainer.mouseup(function (e) {
		        flag = false;
		    });

		    $jcontainer.mouseout(function (e) {
		        flag = false;
		    });

		    function onWindowResize() {

		        viewPortHalfX = $jcontainer.width() / 2;
		        viewPortHalfY = $jcontainer.height() / 2;

		        camera.aspect = viewPortHalfX / viewPortHalfY;
		        camera.updateProjectionMatrix();

		        renderer.setSize($jcontainer.width(), $jcontainer.width());

		    }

		    function animate() {

		        requestAnimationFrame(animate);
		        render();

		    }

		    function render() {
		        camera.lookAt(scene.position);
		        renderer.render(scene, camera);
		    }

		</script>
</body>